<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="../../css/aui.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/yzl.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/sqc.css"/>
    <link rel="stylesheet" href="../../css/weui.css">
		<link rel="stylesheet" href="../../css/jQuery_WeUI.css">

    <style type="text/css">
        body{
          background-color: #fff;
        }
        #tx {
            border-radius: 50%;
            display: inline;
            position: absolute;
            top: 7px;
            left: 3px;
        }

        .member_info {
            float: left;
            width: 25%;
            background-color: #FFFFFF;
        }

        .group_member {
            /*border-bottom:1px solid #EFEFEF;*/
            /*margin:0px 15px*/
            background-color: #FFFFFF;

        }

        .member_info div {
            margin: 10px 15px
        }

        .meber_nickname {
            color: #000000;
            padding: 2px;
            text-align: center;
            font-size: 14px
        }
        *{
          -webkit-box-sizing: inherit;
                  box-sizing: inherit;
        }
        .group_top_info{
          -webkit-box-sizing: border-box;
                  box-sizing: border-box;
        }
        .weui-swiped-btn{
          height: 76px;
          line-height: 60px;
        }
        .group_top_info{
          margin-top: -20px;
        }
    </style>
</head>
<body>
  <div id="blank" class="header">
      <div v-back.tapmode class="back"></div>
      <span class="title">群成员列表</span>
  </div>
<div id="app" v-cloak>
  <div class="" style="height:60px; width:100%;">
  </div>
  <div class="weui-search-bar search-box" id="searchBar">
    <form class="weui-search-bar__form" onsubmit="return searchKeyword()">
      <div class="weui-search-bar__box" v-myclick="showSortBox1">
        <i class="weui-icon-search"></i>
        <input type="search" v-model="keywords" class="weui-search-bar__input" id="searchInput"  placeholder="搜索" required="">
        <a href="javascript:" class="weui-icon-clear" id="searchClear" ></a>
      </div>
      <label class="weui-search-bar__label" id="searchText">
        <i class="weui-icon-search"></i>
        <span>搜索</span>
      </label>
    </form>
    <a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel" v-if="show_btn">取消</a>
  </div>
    <div style="position: relative">
			<div class="sort-message">
				{{sort_title}}
			</div>
			<div class="sort-icon" @click="showSortBox()">
				<img src="../../image/choose_96px.png" alt="">
			</div>

		<div class="sort-user" v-show='sort_box'>
			<ul class="sort-lists">
				<li @click='sortuser(1)'>按推广能力排序</li>
				<li @click='sortuser(2)'>按团队奶牛数排序</li>
				<li @click='sortuser(3)'>按金币排序</li>
				<li @click='sortuser(4)'>按奶牛数排序</li>
				<li @click='sortuser(5)'>按进群时间排序</li>
			</ul>
		</div>
		</div>
	<div class="group_top_info">
		<div class="aui-content aui-margin-b-15">
						<ul class="aui-list aui-media-list weui-cells">
								<li class="aui-list-item aui-list-item-middle weui-cell" v-bind:class="[{'weui-cell_swiped':parseInt(role)>parseInt(content.role)},'item'+content.member_id]" :key="content.member_id" v-for="(content, index) in members.members">
									<!-- 信息区域 -->
										<div class="aui-media-list-item-inner weui-cell__bd"  v-myclick="[content.member_id, member_info]">
											<!-- 头像 -->
												<div class="aui-list-item-media" style="width:20vw">
														<img :key="content.member_id" v-image-resize="{src:content.portrait?content.portrait:'../res/tx00.jpg'}" style="width:56px;height:56px; border-radius:10px;">
												</div>
											<!-- 主体信息 -->
												<div class="aui-list-item-inner">
													<div class="top-message">
														<div class="user-title" :class='"role_name"+content.member_id' v-show="content.role != 1">{{userTitle(content.role)}}</div>
														<div class="username">{{content.member_nickname?content.member_nickname:content.nickname}}</div>
													</div>
													<div class="cow-message" v-show="sort_num == 1">已有{{content.sub_member_count_d1}}个分享</div>
													<div class="cow-message" v-show="sort_num == 2">团队共有{{content.sub_cow_count_all}}头奶牛</div>
													<div class="cow-message" v-show="sort_num == 3">{{content.gold}}金币</div>
													<div class="cow-message" v-show="sort_num == 4">已有{{content.cow}}头奶牛</div>
													<div class="cow-message" v-show="sort_num == 5">{{nowData(content.date_join)}}</div>
												</div>
										</div>
										<!-- 左侧按钮 -->
										<div class="weui-cell__ft" v-show="parseInt(role)>parseInt(content.role)">
											<a class="weui-swiped-btn weui-swiped-btn_default close-swipeout" :class='"action"+content.member_id' v-show="role == 3&&content.role<2" v-myclick="[content.member_id,setClanManager]">设置长老</a>
											<a class="weui-swiped-btn weui-swiped-btn_warn close-swipeout" v-show="role > 1" v-myclick="[content.member_id,cancelmember]">移除群成员</a>
										</div>
								</li>
						</ul>
				</div>
	</div>
	<div class="cover-box" @click="coverBox" style="background-color: rgba(0,0,0,.12); position:fixed; bottom: 0; width:100vw; height:60vh; z-index:999" v-show="sort_box">
	</div>
</div>
</body>
<script src="../../script/api.js"></script>
<script src="../../script/vue.js"></script>
<script src="../../script/app.js"></script>
<script src="../../script/common.js"></script>
<script src="../../script/url.js"></script>
<script type="text/javascript" src="../../script/jquery.js"></script>
<script src="../../script/jQuery_WeUI.js"></script>
<script type="text/javascript">
    var members;
    apiready = function () {
        api.parseTapmode();
        showProgress();
        setBSImg();
        new Vue({
  					el: '#blank'
  			});
        var data = {
            member_id: getPrefs('member_id'),
            clan_id: api.pageParam.group_id,
            sort: 1,
        };
        var callback = function (ret) {
            members = ret.content;
            initApp();
            api.parseTapmode();
        };
        pinet.post(URL.getClanMembers, data, callback);
    };

		function initApp() {
        vm = new Vue({
            el: '#app',
            data: {
                members:members,
                role: api.pageParam.role,
                keywords: '',
                show_btn: false,
                sort_box: false,
                sort_title: '按推广能力排序',
                sort_num: 1
            },
            computed: {
            },
            methods: {
              userTitle:function(index){
                index = Number(index)
                switch (index) {
                    case 3:
                        return '族长';
                    case 2:
                        return '长老';
                    case 1:
                        return ;
                    default:
                        break;
                }
              },
              nowData:function(time){
                var a = new Date(time*1000)
                var year = a.getFullYear()
                var month = a.getMonth() + 1
                var date = a.getDate()
                return year + '年' + month + '月' + date + '号加入'
              },
              showSortBox:function(){
                if(this.sort_box){
                  return this.sort_box = false
                }
                this.sort_box = true;
              },
							showSortBox1:function(){
                this.sort_box = false
              },
              sortuser:function(index){
                this.sort_num = index
                var data = {
                    member_id: getPrefs('member_id'),
                    clan_id: api.pageParam.group_id,
                    sort: index,
                };
                this.sort_box = false;
                var callback = function (ret) {
                    vm.members = ret.content;
                };
                pinet.post(URL.getClanMembers, data, callback);
                switch (index) {
                    case 1:
                        return vm.sort_title = '按推广能力排序';
                    case 2:
                        return vm.sort_title = '按团队奶牛排序';
                    case 3:
                        return vm.sort_title = '按金币排序';
                    case 4:
                        return vm.sort_title = '按奶牛数排序';
                    case 5:
                        return vm.sort_title = '按进群时间排序';
                    default:
                        break;
                }
              },
              member_info:function(member_id){
                openWin('member_info',{uid:member_id,group_id:api.pageParam.group_id})
              },

              cancelmember:function(member_id){
                var data = {
                    member_id:getPrefs('member_id'),
                    target_id: member_id,
                    clan_id: api.pageParam.group_id
                };
                var callback = function (ret) {
                  //获取
                  $api.remove($api.dom('.item'+member_id));

                };
                pinet.post(URL.removeClan, data, callback);
              },
              reload:function(){
                var data = {
                    member_id: getPrefs('member_id'),
                    clan_id: api.pageParam.group_id,
                    sort: this.sort_num,
                };
                var callback = function (ret) {
                    vm.members = ret.content;
                };
                pinet.post(URL.getClanMembers, data, callback);
              },
              setClanManager:function (member_id) {
                var data = {
                    member_id: getPrefs('member_id'),
                    clan_id: api.pageParam.group_id,
                    another_id: member_id,
                    role:1
                };
                var callback = function (ret) {
                  api.sendEvent({
                      name: 'updateClan',
                  });
                  api.toast({
                      msg: '设置成功',
                      duration: 2000,
                      location: 'middle'
                  });

                  // $api.remove($api.dom('.action'+member_id));
                  // $api.css('.role_name'+member_id, 'display: block');
                  //
                  // $api.html('.role_name'+member_id, '长老');
                  vm.reload();
                  $('.weui-cell_swiped').swipeout('close');

                };
                pinet.post(URL.setClanManager, data, callback);
              },
            },
            watch:{
							keywords: function (newVaL) {
								if(newVaL.length>0){
                  setTimeout(searchKeyword(),1000)
									this.show_btn = true;
								}else{
									this.show_btn = false
									this.keywords = ''
                  setTimeout(vm.sortuser(1),1000)
								}
							},
							sort_box: function(i){
								$('.weui-cell_swiped').swipeout('close');
								$(window).scroll(function(){
									var this_scrollTop = $(this).scrollTop();
									if(this_scrollTop > 1 ){
										vm.sort_box = false
									}
								})
							}
						},
            mounted:function(){
              if(api.pageParam.role>=2){
                $(".weui-cell_swiped").swipeout();
              }
            },
        });
    }

  function searchKeyword() {
    var keywords = document.getElementById("searchInput").value;
    var data = {
        member_id: getPrefs('member_id'),
        clan_id: api.pageParam.group_id,
        sort: 1,
        keywords : keywords,
    };
    var callback = function (ret) {
        vm.members = ret.content;
    };
    pinet.post(URL.getClanMembers, data, callback);
	}
	function coverBox(){
		vm.sort_box = false
	}
</script>
</html>
